<template>
  <div class="common_block_div">
    <!-- 操作按钮 -->
    <div class="common_button flex_ac">
      <div class="right_button margin_a flex">
        <a href="javascript:;" class="color_blue " @click="handleAdd" v-if="have_auth('/dictionary/policy-category/add')">新增</a>
      </div>
    </div>

    <!-- 数据表格 -->
    <el-table v-loading="loading" :data="list" style="width: 100%">
      <el-table-column label="ID" prop="id" />
      <el-table-column label="分类名称" prop="title" :show-overflow-tooltip="true" />
      <el-table-column label="操作" width="200px" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleEdit(scope.row)" v-if="have_auth('/dictionary/policy-category/edit')">编辑</el-button>
          <el-button size="mini" type="text" style="color: #F56C6C;" @click="handleDelete(scope.row)"  v-if="have_auth('/dictionary/policy-category/del')">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit"
      @pagination="getList" />

    <!-- 添加/编辑对话框 -->
    <el-dialog v-dialogDrag :close-on-click-modal="false" :title="dialogTitle" :visible.sync="dialogVisible"
      width="500px" append-to-body @closed="handleDialogClosed">
      <el-form ref="dialogForm" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="分类名称" prop="title">
              <el-input v-model="form.title" clearable placeholder="请输入分类名称" maxlength="50" show-word-limit />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm" :loading="is_ajax">{{ is_ajax ? '保存中···' : '确定' }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入政策管理API
import policyApi from '@/api/policy';

export default {
  name: 'policy_category',
  data() {
    return {
      loading: true,
      total: 0,
      list: [],
      queryParams: {
        page: 1,
        limit: 16
      },
      dialogVisible: false,
      dialogTitle: '新增分类',
      is_ajax: false,
      form: {
        id: '',
        title: ''
      },
      rules: {
        title: [
          { required: true, message: "分类名称不能为空", trigger: "blur" }
        ]
      }
    }
  },
  created() {
    this.getList();
  },
  methods: {
    /** 获取分类列表 */
    getList() {
      const _this = this;
      this.loading = true;
      policyApi.categoryListWithPage(this.queryParams).then(function (res) {
        if (res && res.message) {
          _this.list = res.message.data || [];
          _this.total = res.message.total || 0;
        }
        _this.loading = false;
      }).catch(function (error) {
        console.error('获取公告分类列表失败:', error);
        _this.loading = false;
      });
    },

    /** 新增分类 */
    handleAdd() {
      this.dialogTitle = '新增分类';
      this.resetForm();
      this.form = {
        id: '',
        title: ''
      };
      this.dialogVisible = true;
    },

    /** 编辑分类 */
    handleEdit(row) {
      this.dialogTitle = '编辑分类';
      this.resetForm();
      this.form = {
        id: row.id || '',
        title: row.title || ''
      };
      this.dialogVisible = true;
    },

    /** 删除分类 */
    handleDelete(row) {
      const _this = this;
      this.$confirm('是否确认删除该分类?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        policyApi.categoryDelete({ id: row.id }).then((res) => {
          if (res) {
            _this.getList();
            _this.$message.success('删除成功');
          }
        }).catch((err) => {
          console.error('删除分类失败:', err);
          _this.$message.error('删除失败');
        });
      }).catch(() => { });
    },

    /** 提交表单 */
    submitForm() {
      const _this = this;
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          this.is_ajax = true;
          const data = {
            id: this.form.id || '',
            title: this.form.title
          };

          policyApi.categoryCreateOrUpdate(data).then(function (res) {
            if (res) {
              _this.$message.success('操作成功');
              _this.dialogVisible = false;
              _this.getList();
            }
            _this.is_ajax = false;
          }).catch(function (error) {
            console.error('保存分类失败:', error);
            _this.is_ajax = false;
          });
        }
      });
    },

    /** 重置表单 */
    resetForm() {
      if (this.$refs.dialogForm) {
        this.$refs.dialogForm.clearValidate();
      }
    },

    /** 对话框关闭后的回调 */
    handleDialogClosed() {
      this.resetForm();
      this.form = {
        id: '',
        title: ''
      };
    }
  }
}
</script>

<style scoped></style>
